<template>
	<div>
		<el-row :gutter="20">
			<el-col :span="12" :offset="17">
				<el-input style="width: 18.7rem;margin: 0 0.5rem 0.5rem 0;" clearable suffix-icon="el-icon-search" v-model="queryParams.content" placeholder="请输入内容"></el-input>
				<el-button class="bgc2f6 cfff" @click="seach">搜索</el-button>
			</el-col>
		</el-row>
		<div class="w100 p1 h65 bgcfff bsbb" style="border: #e6e6e6 1px solid; border-radius: 8px;"> 
			<div style="height: 60rem;overflow-y:auto;"  v-loading="loading" element-loading-text="拼命加载中">
				<el-table :data="tableData" height="100%" style="width: 100%;">
				<!-- 	<el-table-column width="80" label="智能地图" align="center">
						<template slot-scope="scope">
							<div class="star">
								<div
									:class="scope.row.collection == 1 ? 'iconfont icon-star' : 'iconfont icon-star star-active'"
									@click="selStar(scope.row.id, scope.row.collection)"
								></div>
							</div>
						</template>
					</el-table-column> -->
					<el-table-column prop="numbering" label="统一编号" show-overflow-tooltip align="center"></el-table-column>
					<!-- <el-table-column prop="address" label="http://117.73.254.217:2221/resources" show-overflow-tooltip align="center"></el-table-column> -->
					<el-table-column prop="Monitoring_content" label="监测内容" show-overflow-tooltip align="center"></el-table-column>
					<el-table-column prop="Monitoring_start_time" label="监测起始时间" align="center"></el-table-column>
					<el-table-column prop="area" label="地区" show-overflow-tooltip align="center"></el-table-column>
					<el-table-column prop="Monitoring_mode" label="监测方式" show-overflow-tooltip align="center"></el-table-column>
					<el-table-column fixed="right" label="操作" align="center" width="100">
						<template slot-scope="scope">
							<el-button type="text" size="small" icon="el-icon-view" @click="details(scope.row.id)">查看详情</el-button>
						</template>
					</el-table-column>
				</el-table>
			</div>
			<div class="tar mt05">
				<el-pagination
					@size-change="handleSizeChange"
					@current-change="handleCurrentChange"
					:page-sizes="[16, 30, 45, 60]"
					:page-size="queryParams.pageSize"
					background
					layout="total, sizes, prev, pager, next, jumper"
					:total="count"
				></el-pagination>
			</div>
		</div>
		<!-- 查看大图 -->
		<dialogImg :lookImg="lookImg" :biggerImg="biggerImg" @handleClose="handleClose" v-if="biggerImg"></dialogImg>
	</div>
</template>

<script>
import dialogImg from '@/components/dialogImg.vue';
import { monitor, jcdSel } from '@/api/resourceCenter.js';
import noData from '@/assets/noData.jpg';
import { getItem } from '@/utils/storage.js';
import './../../../scss/icon-star.css';
export default {
	name: '',
	components: {
		dialogImg
	},
	data() {
		return {
			biggerImg: false,
			loading: false,
			lookImg: '',
			isLogin: getItem('token'),
			count:null,
			input: null,
			tableData: [],
			queryParams: {
				pageSize: 16,
				page: 1,
				type: 3,
				content: null,
				token: getItem('token')
			}
		};
	},
	created() {
		this.getList();
	},
	methods: {
		getList() {
			this.loading = true;
			monitor(this.queryParams).then(res => {
				this.loading = false;
				this.tableData = res.data.arr;
				this.count = res.data.count;
			});
		},
		browse(val) {
			if (val == null) {
				this.lookImg = noData;
			} else {
				this.lookImg = val;
			}
			// this.lookImg = val.image;
			this.biggerImg = true;
		},
		handleClose(val) {
			this.biggerImg = val;
		},
		//详情
		details(val) {
			this.$router.push({
				path: '/articleDetail',
				query: {
					id: val
				}
			});
		},
		//选择是否在地图
		selStar(id, collection) {
			let sel = {
				id,
				collection: this.isStatus(collection),
				token: getItem('token')
			};
			jcdSel(sel).then(() => {
				this.getList();
			});
		},
		isStatus(val) {
			if (val == 0) {
				return 1;
			} else {
				return 0;
			}
		},
		handleSizeChange(val) {
			this.queryParams.pageSize = val;
			this.getList();
		},
		handleCurrentChange(val) {
			this.queryParams.page = val;
			this.getList();
		},
		seach(){
			this.getList();
		}
	}
};
</script>

<style scoped lang="scss">
/deep/.el-pagination.is-background .el-pager li:not(.disabled).active {
	background-color: #2f6bbb;
}
.icon-star {
	text-align: right;
	margin-right: 1rem;
	color: #fee240;
	font-size: 30px;
}
.icon-star.star-active {
	text-align: right;
	margin-right: 1rem;
	color: #dddddd;
	font-size: 30px;
}
</style>
